<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色管理</title>
    <link rel="stylesheet" href="../../../static/web/layui/css/layui.css" th:href="@{/web/layui/css/layui.css}" />


    <script src="../../../static/web/layui/layui.js" th:src="@{/web/layui/layui.js}"></script>
    <script src="../../../static/web/jquery-3.3.1/jquery-3.3.1.js" th:src="@{/web/jquery-3.3.1/jquery-3.3.1.js}"></script>
    <script src="../../../static/web/kitadmin/js/common.js" th:src="@{/web/kitadmin/js/common.js}"></script>
</head>

<body>

<div class="layui-row" style="margin-top: 10px">
    <div class="layui-col-md3" style="width: 260px;margin-left: 10px">
        <div class="layui-inline">
            <input class="layui-input" name="searchText" id="searchText" autocomplete="off" placeholder="输入角色">
        </div>
        <button class="layui-btn select" data-type="select">
            <i class="layui-icon layui-icon-search"></i>
        </button>

    </div>
    <div class="layui-col-md4">
        <div class="layui-btn-group action">
            <button class="layui-btn" data-type="add">
                <i class="layui-icon layui-icon-add-1"></i>新增
            </button>
            <button class="layui-btn layui-btn-danger" data-type="delete">
                <i class="layui-icon layui-icon-delete"></i>删除
            </button>

        </div>
    </div>

</div>
<table id="roleList" class="layui-hide" lay-filter="role"></table>
<div id="page"></div>
<!-- 表格操作-->
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-search"></i>查看</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>


<script type="text/html" id="userNameTpl">
    <span style="color: #009688;font-size: 20px"><i class="layui-icon layui-icon-username" style="font-size: 20px"></i>  {{d.username}}</span>
</script>

<script type="text/html" id="delFlagTpl">
  <input type="checkbox" name="delFlag" lay-skin="switch" lay-text="激活|禁用" lay-filter="delFlag" value = {{d.delFlag}} {{ d.delFlag == '1' ? 'checked' : '' }}>
</script>


<script  type="text/javascript" th:inline="javascript">
    var roleListTable;

    $(function(){
        layui.use([
            'table','laytpl'
        ], function () {
            var table = layui.table;
            var laytpl = layui.laytpl;

            laytpl.toDateString = function(d, format){
                var date = new Date(d || new Date())
                    ,ymd = [
                    this.digit(date.getFullYear(), 4)
                    ,this.digit(date.getMonth() + 1)
                    ,this.digit(date.getDate())
                ]
                    ,hms = [
                    this.digit(date.getHours())
                    ,this.digit(date.getMinutes())
                    ,this.digit(date.getSeconds())
                ];

                format = format || 'yyyy-MM-dd HH:mm:ss';

                return format.replace(/yyyy/g, ymd[0])
                    .replace(/MM/g, ymd[1])
                    .replace(/dd/g, ymd[2])
                    .replace(/HH/g, hms[0])
                    .replace(/mm/g, hms[1])
                    .replace(/ss/g, hms[2]);
            };

            //数字前置补零
            laytpl.digit = function(num, length, end){
                var str = '';
                num = String(num);
                length = length || 2;
                for(var i = num.length; i < length; i++){
                    str += '0';
                }
                return num < Math.pow(10, length) ? str + (num|0) : num;
            };

            //方法级渲染
            roleListTable = table.render({
                id: 'roleList',
                elem: '#roleList',
                url: '/webs/role/getRoleByPage',
                loading: true,
                even: true,
                page: true,
                height: 'full-70',
                cols: [
                    [
                      {type: 'numbers', title: 'No.', fixed: true, width: '3%'}
                    , {checkbox: true, fixed: true, width: '3%'}
                    , {field: 'roleName', title: '角色名称', width: '20%', sort: true}
                    , {field: 'remark', title: '角色描述', width: '20%'}
                    , {field: 'createDate', title: '创建时间', width: '20%',templet: '<div>{{ layui.laytpl.toDateString(d.createDate,"yyyy-MM-dd") }}</div>'}
                    , {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBar"}
                    ]
                    ],
                done: function(res, curr, count){
                    $("[data-field='id']").css('display','none');
                }

            });

            var active = {
                select: function () {
                    var searchText = $('#searchText').val();
                    roleListTable.reload( {
                        where: {
                            roleName: searchText,
                            remark: searchText
                        }
                    });
                },
                add: function () {
                    openWindow('user-role', '添加角色', '/webs/role/addRole','50%');
                },
                delete: function(){
                    var checkStatus = table.checkStatus('roleList');
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.alert('请选择要删除的角色！', {icon: 5});
                        return false;
                    }else{
                        deleteRole(data);
                    }
                }
            };

            //监听工具条
            table.on('tool(role)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    openWindow('role-detail', "编辑角色", '/webs/role/detailRole?id=' + data.id,'60%');
                } else if (obj.event === 'delete') {
                    deleteRole([data]);
                } else if (obj.event === 'edit') {
                    openWindow('role-update', "编辑角色", '/webs/role/updateRole?id=' + data.id,'60%');
                }
            });


            $('.action .layui-btn, .select.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

    });

    function deleteRole(data){
        layer.confirm('确定删除已选角色?', {icon: 3, title: '提示'}, function () {
            var ids = [];
            for(var i in data){
                ids.push(data[i].id);
            }

            $.ajax({
                url: '/webs/role/deleteRole',
                type:'post',
                data: {ids:ids},
                traditional: true,
                success:function(data){
                    if(data.code == 'SUCCESS'){
                        roleListTable.reload();
                        layer.msg("删除成功！", {icon:6,offset: 'rb',area:['200px','80px'],anim:2});
                    }else{
                        layer.msg("删除失败",  {icon: 5});
                    }
                }
            });
        });
    }



</script>
</body>

</html>
